<template>
	<view class="p-30">
		<PageHead backPath="/pages/user/index?p=3"></PageHead>
		<view class="barCodeA">
			<image src="https://zh-cn.ubisoft.com/abstergo/zzm/images/txm.png" mode=""></image>
		</view>
		<Acard bgFilter>
			<ul class="fs-28 fs-strong fs-white">
				<li>
					<text class="nbg width-per-30">ID</text>
					<text class="nbg width-per-70">{{ userinfo.id }}</text>
				</li>
				<li>
					<text class="nbg width-per-30">姓名</text>
					<text class="nbg width-per-70">{{ userinfo.name }}</text>
				</li>
				<li>
					<text class="nbg width-per-30">学号</text>
					<text class="nbg width-per-70">{{ userinfo.stu_code }}</text>
				</li>
				<li>
					<text class="nbg width-per-30">社团</text>
					<text class="nbg width-per-70">
						{{ userinfo.society_id == '0' ? '未加入社团' : userinfo.society_title }}
					</text>
				</li>
			</ul>
		</Acard>

		<Acard pad="8px 12px" style="text-align: center" class="mt-30" @click.native="show = true">
			<view>修改密码</view>
		</Acard>

		<u-overlay :show="show" opacity="0.8">
			<view class="height-100 fs-white" style="transform: scale(0.85);">
				<u--form :model="formData" :rules="rules" ref="ruleForm">
					<u-form-item prop="oldPassword">
						<u--input
							placeholder="旧密码"
							placeholderStyle="color:#a3a3a3;font-size:40rpx"
							prefixIcon="account-fill"
							prefixIconStyle="font-size: 40px;color: #000;"
							class="login-input"
							v-model="formData.oldPassword"
						></u--input>
					</u-form-item>
					<u-form-item prop="newPassword">
						<u--input
							placeholder="新密码"
							placeholderStyle="color:#a3a3a3;font-size:40rpx"
							prefixIcon="lock-fill"
							prefixIconStyle="font-size: 40px;color: #000"
							class="login-input"
							password
							v-model="formData.newPassword"
						></u--input>
					</u-form-item>
					<u-form-item prop="renewPassword">
						<u--input
							placeholder="确认密码"
							placeholderStyle="color:#a3a3a3;font-size:40rpx"
							prefixIcon="lock-fill"
							prefixIconStyle="font-size: 40px;color: #000"
							class="login-input"
							password
							v-model="formData.renewPassword"
						></u--input>
					</u-form-item>
					<u-form-item>
						<Acard
							@click.native="changePassword"
							pad="8px 12px"
							class="width-100 mr-30"
							style="text-align: center;"
						>
							<view>改密</view>
						</Acard>
						<Acard
							pad="8px 12px"
							class="width-100"
							style="text-align: center;"
							@click.native="show = false"
						>
							<view>取消</view>
						</Acard>
					</u-form-item>
				</u--form>
			</view>
		</u-overlay>
		
		<ParticleBackground></ParticleBackground>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'UserInfo',
	data() {
		return {
			show: false,
			showChangePassProtect: false,

			formData: {
				oldPassword: '',
				newPassword: '',
				renewPassword: ''
			},
			rules: {
				oldPassword: {
					type: 'string',
					required: true,
					message: '请填写旧密码',
					trigger: ['blur', 'change']
				},
				newPassword: [
					{
						type: 'string',
						required: true,
						message: '请填写新密码',
						trigger: ['blur']
					},
					{
						min: 6,
						message: '密码长度不能小于6',
						trigger: ['blur', 'change']
					}
				],
				renewPassword: {
					asyncValidator: (rule, value, callback) => {
						if (value !== this.formData.newPassword) {
							callback(new Error('两次密码不一致！'));
						} else {
							callback();
						}
					},
					trigger: ['blur', 'change']
				}
			}
		};
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	methods: {
		changePassword() {
			this.$refs['ruleForm'].validate().then(async res => {
				let result = await uni.$u.http.post('/user/changePass', {
					stu_code: this.userinfo.stu_code,
					oldPassword: this.formData.oldPassword,
					newPassword: this.formData.newPassword
				});
				if (result.data.code === 200) {
					uni.showToast({
						title: '成功',
						success: () => {
							this.show = false;
						}
					});
				} else {
					uni.showToast({
						title: '旧密码错误',
						icon: 'error',
						success: () => {
							this.formData.oldPassword = '';
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.barCodeA {
	width: 90%;
	overflow: hidden;
	opacity: 0.5;
	height: 30px;
	margin: 0 auto 5px auto;
	image {
		animation: txm 0.3s infinite linear both;
	}
}
@keyframes txm {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(-14px);
	}
}
@keyframes Frotation360 {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
.login-input {
	background-color: #fff;
	color: #333;
	height: 112rpx;
	width: 100%;
	margin-bottom: 20rpx;
}

ul li {
	display: flex;
	flex-flow: nowrap row;
	align-items: center;
	font-family: 'Oxanium-Regular', 'Microsoft YaHei', 'PingFang SC';
	margin-bottom: 10px;

	&:last-child {
		margin-bottom: 0;
	}

	&:before {
		margin-right: 20rpx;
		width: 6px;
		height: 20px;
		background: #9bd2bd;
		border-radius: 3px;
		box-shadow: 0 0 10px rgb(155, 210, 189);
		animation: FpulseSlowB infinite alternate 1s linear;
		content: '';
	}

	.nbg {
		background: rgba(26, 26, 26, 0.5);
		overflow: hidden;
		clip-path: polygon(
			6px 0px,
			calc(100% - 6px) 0,
			100% 6px,
			100% calc(100% - 6px),
			calc(100% - 6px) 100%,
			6px 100%,
			0 calc(100% - 6px),
			0 6px
		);
		// height: 32px;
		box-sizing: border-box;
		padding: 5px 16px;
		margin-right: 6px;
	}
}
</style>
